<template>
    <div class="education-composition">
        <div class="chart-container">
            <h3>居民学历构成</h3>
            <div id="educationChart" class="chart"></div>
        </div>
        <el-button @click="exportData">导出</el-button>
        <el-table :data="tableData" border>
            <el-table-column prop="index" label="序号"></el-table-column>
            <el-table-column prop="education" label="学历"></el-table-column>
            <el-table-column prop="count" label="人次"></el-table-column>
            <el-table-column prop="percentage" label="比例"></el-table-column>
        </el-table>
    </div>
</template>
<script setup>
import { listResidentfirst, listResident, getResident, delResident, addResident, updateResident } from "@/api/resident/resident";
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { ElButton, ElTable, ElTableColumn } from 'element-plus';
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
const { culture } = proxy.useDict('culture');
const residentList = ref([]);
function getResidentList() {
    listResidentfirst().then(response => {
        residentList.value = response.rows;
        for (let i = 0; i < residentList.value.length; i++) {
            let cultureId = residentList.value[i].culture;
            educationData[cultureId - 1].value++;
            const chartDom = document.getElementById('educationChart');
            const myChart = echarts.init(chartDom);
            const option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: '居民学历构成',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: educationData
                    }
                ]
            };
            myChart.setOption(option);
            tableData.value[cultureId - 1].count++;
            tableData.value[cultureId - 1].percentage = ((tableData.value[cultureId - 1].count / residentList.value.length) * 100).toFixed(1) + '%';
        }
    });
}
onMounted(() => {
    getResidentList();

})


const educationData = [
    { name: '初中/中专', value: 0 },
    { name: '高中', value: 0 },
    { name: '本科', value: 0 },
    { name: '研究生', value: 0 },
    { name: '博士', value: 0 }
];
const tableData = ref([
    { index: 1, education: '初中/中专', count: 0, percentage: '0%' },
    { index: 2, education: '高中', count: 0, percentage: '0%' },
    { index: 3, education: '本科', count: 0, percentage: '0%' },
    { index: 4, education: '研究生', count: 0, percentage: '0%' },
    { index: 5, education: '博士', count: 0, percentage: '0%' }
]);
const exportData = () => {
    // 这里简单打印数据，实际可实现导出Excel等功能
    console.log('导出数据:', tableData.value);
};

</script>
<style scoped>
.education-composition {
    padding: 20px;
}

.chart-container {
    margin-bottom: 20px;
    text-align: center;
}

.chart {
    width: 400px;
    height: 400px;
    margin: 0 auto;
}
</style>